<template>
  <div class="order-view">
    <!-- 头部导航 -->
    <div class="header">
      <div class="back-btn" @click="goBack">‹</div>
      <div class="title">我的订单</div>
    </div>

    <div class="order-list" v-if="orderList.length > 0">
      <div 
        v-for="order in orderList" 
        :key="order.id" 
        :class="['order-item', order.status === 0 ? (order.countdown <= 0 ? 'expired' : 'unpaid') : 'completed']"
        @click="goToCinema(order.cinemaId,order.filmId)"
      >
        <div class="cinema-header">
          <div class="cinema-name">{{ order.cinemaName }} <span style="color: gainsboro;">></span></div>
          <div v-if="order.status == 0" class="payment-countdown">
            {{ order.countdown <= 0? '订单已过期' : `支付剩余时间${formatCountdown(order.countdown)}` }}
          </div>
          <div v-else class="order-status completed">{{order.status == 1 ? '已支付' : '已取消'}}</div>
        </div>
        
        <div class="order-content">
          <div class="movie-poster">
            <img :src="order.filmImg" alt="暂无图片">
          </div>
          
          <div class="order-info">
            <div class="movie-title">{{ order.filmName }} {{ getSeatCount(order.soldSeat) }}张</div>
            <div class="movie-time">{{ formatScheduleDate(order.sliceArrangementDate) }}{{ order.startTime }}</div>
            <div class="seat-info">{{ order.playHall }}号厅 {{ formatSeats(order.soldSeat) }}</div>
            
            <!-- 小吃信息 -->
            <div class="snacks-info">
              <div class="snacks-list">
                <span class="snack-status" v-if="order.streetFoods && order.streetFoods.length > 0">有小吃</span>
                <span class="snack-status" v-else style="color: gray;"> 无小吃</span>
                <span class="detail-btn" @click.stop="showOrderDetail(order)">明细</span>
              </div>
            </div>
          </div>
          
          <div class="order-actions">
            <button v-if="order.status === 0 && order.countdown > 0" class="pay-btn" @click.stop="payOrder(order)">付款</button>
            <button v-else-if="order.status == 2" class="expired-btn" disabled>已取消</button>
            <button v-else class="review-btn">已支付</button>
          </div>
        </div>
        
        <div class="order-footer">
          <div class="price-detail">
            <div class="total-price">总价：{{ order.totalPrice }}元</div>
            <!-- 价格明细 -->
            <div class="price-breakdown" v-if="order.streetFoods && order.streetFoods.length > 0">
              <span class="ticket-price">
                电影票：{{ getTicketPrice(order) }}元
              </span>
              <span class="snack-price" v-if="getSnackTotalPrice(order) > 0">
                小吃：{{ getSnackTotalPrice(order) }}元
              </span>
            </div>
          </div>
          <button class="delete-btn" @click.stop="deleteOrder(order.id)">删除订单</button>
        </div>
      </div>
    </div>

    <!-- 加载更多按钮 -->
    <div class="load-more" v-if="hasMore && !loading">
      <button @click="loadMore" class="load-more-btn">加载更多</button>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">
      加载中...
    </div>

    <!-- 没有数据 -->
    <div v-if="!loading && orderList.length === 0" class="no-data">
      暂无订单数据
    </div>

    <!-- 底部提示 -->
    <div v-if="!hasMore && orderList.length > 0" class="bottom-tip">
      订单已全部加载完毕
    </div>

    <!-- 订单明细弹窗 -->
    <div v-if="showOrderDetailModal" class="detail-modal" @click="closeOrderDetailModal">
      <div class="detail-content" @click.stop>
        <div class="detail-header">
          <h3>订单明细</h3>
          <button class="close-btn" @click="closeOrderDetailModal">×</button>
        </div>
        <div class="detail-body">
          <!-- 电影票 -->
          <div class="detail-item">
            <div class="item-name">电影票</div>
            <div class="item-detail">
              <span>¥{{ getSeatCount(currentOrderDetail.soldSeat) > 0 ? (getTicketPrice(currentOrderDetail) / getSeatCount(currentOrderDetail.soldSeat)).toFixed(2) : '0.00' }} × {{ getSeatCount(currentOrderDetail.soldSeat) }}张</span>
              <span class="item-total">¥{{ getTicketPrice(currentOrderDetail) }}</span>
            </div>
          </div>
          
          <!-- 小吃列表 -->
          <template v-if="currentOrderDetail.streetFoods && currentOrderDetail.streetFoods.length > 0">
            <div class="detail-item" v-for="snack in currentOrderDetail.streetFoods" :key="snack.streetFoodName">
              <div class="item-name">{{ snack.streetFoodName }}</div>
              <div class="item-detail">
                <span>¥{{ snack.price }} × {{ snack.num }}份</span>
                <span class="item-total">¥{{ (snack.price * snack.num).toFixed(2) }}</span>
              </div>
            </div>
          </template>
          
          <div class="detail-total">
            <div class="total-row">
              <span>总计</span>
              <span class="total-amount">¥{{ currentOrderDetail.totalPrice }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 二维码支付弹窗 -->
    <div v-if="showQrCode" class="qr-modal" @click="closeQrModal">
      <div class="qr-content" @click.stop>
        <div class="qr-header">
          <h3>扫码支付</h3>
          <button class="close-btn" @click="closeQrModal">×</button>
        </div>
        <div class="qr-body">
          <div class="qr-code-container">
            <img v-if="qrCodeText" :src="qrCodeImage" alt="支付二维码" @error="handleQrError" />
            <div v-else class="qr-loading">生成二维码中...</div>
          </div>
          <p class="qr-tip">请使用支付宝扫描上方二维码完成支付</p>
          <div class="order-info">
            <p>订单号：{{ currentOrderInfo.orderNo }}</p>
            <p>支付金额：¥{{ currentOrderInfo.totalPrice }}</p>
          </div>
          <button class="payment-check-btn" @click="checkPaymentStatus">已完成支付</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, getCurrentInstance } from 'vue'
import api from '@/utils/http'
import { ElMessage } from 'element-plus'

const global = getCurrentInstance().appContext.config.globalProperties

// 响应式数据
const orderList = ref([])
const loading = ref(false)
const hasMore = ref(true)
const currentPage = ref(1)
const pageSize = ref(10)
const countdownTimers = ref(new Map())

// 二维码相关
const showQrCode = ref(false)
const qrCodeText = ref('')
const currentOrderInfo = ref({})

// 订单明细相关
const showOrderDetailModal = ref(false)
const currentOrderDetail = ref({})

// 生成二维码图片URL
const qrCodeImage = computed(() => {
  if (!qrCodeText.value) return ''
  // 使用在线二维码生成API
  return `https://api.isoyu.com/qr/?m=0&e=L&p=10&url=${encodeURIComponent(qrCodeText.value)}`
})

// 获取订单列表
const getOrderList = async (pageNo = 1, isLoadMore = false) => {
  if (loading.value) return

  let userId = localStorage.getItem('userId');
  if (!userId) {
    global.$router.push({ name: 'LoginView' });
    return;
  } 
  loading.value = true
  try {
    const response = await api.get(`/orders/getList/${userId}/${pageNo}/${pageSize.value}`)
    const result = response.data
    if (result) {
      const newOrders = result.records.map(order => ({
        ...order,
        countdown: order.status == 0 ? calculateCountdown(order.createTime) : 0
      }))
      
      if (isLoadMore) {
        orderList.value = [...orderList.value, ...newOrders]
      } else {
        orderList.value = newOrders
      }
      
      // 更新分页信息
      hasMore.value = result.current < result.pages
      currentPage.value = result.current
      
      // 为未支付订单启动倒计时
      startCountdownForUnpaidOrders()
    }
  } catch (error) {
    console.error('获取订单列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 加载更多
const loadMore = () => {
  if (hasMore.value && !loading.value) {
    getOrderList(currentPage.value + 1, true)
  }
}

// 计算倒计时（10分钟 = 600秒）
const calculateCountdown = (createTime) => {
  const createTimestamp = new Date(createTime).getTime()
  const currentTimestamp = new Date().getTime()
  const elapsedSeconds = Math.floor((currentTimestamp - createTimestamp) / 1000)
  const remainingSeconds = Math.max(0, 600 - elapsedSeconds) // 10分钟 = 600秒
  return remainingSeconds
}

// 格式化倒计时显示
const formatCountdown = (seconds) => {
  if (seconds <= 0) return '00:00'
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
}

// 为未支付订单启动倒计时
const startCountdownForUnpaidOrders = () => {
  // 清除现有计时器
  countdownTimers.value.forEach(timer => clearInterval(timer))
  countdownTimers.value.clear()
  
  orderList.value.forEach(order => {
    if (order.status === 0 && order.countdown > 0) {
      const timer = setInterval(() => {
        order.countdown -= 1
        if (order.countdown <= 0) {
          clearInterval(timer)
          countdownTimers.value.delete(order.id)
          // 这里可以添加订单过期处理逻辑
        }
      }, 1000)
      countdownTimers.value.set(order.id, timer)
    }
  })
}

// 获取座位数量
const getSeatCount = (soldSeat) => {
  if (!soldSeat) return 0
  return soldSeat.split(',').length
}

// 格式化座位信息
const formatSeats = (soldSeat) => {
  if (!soldSeat) return ''
  const seats = soldSeat.split(',')
  if (seats.length <= 3) {
    return seats.map(seat => {
    const [row, seatNum] = seat.split('-')
    return `${row}排${seatNum}座`
  }).join(' ')
  }
  return seats.slice(0, 3).map(seat => {
    const [row, seatNum] = seat.split('-')
    return `${row}排${seatNum}座`
  }).join(' ') + '...'
}

const formatScheduleDate =(sliceArrangementDate) => {
  if (!sliceArrangementDate) {
    return '今天'
  }
  
  const scheduleDate = new Date(sliceArrangementDate)
  const today = new Date()
  
  today.setHours(0, 0, 0, 0)
  scheduleDate.setHours(0, 0, 0, 0)
  
  const diffTime = scheduleDate.getTime() - today.getTime()
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
  
  const month = scheduleDate.getMonth() + 1
  const day = scheduleDate.getDate()
  
  if (diffDays === 0) {
    return `今天 ${month}月${day}日`
  } else if (diffDays === 1) {
    return `明天 ${month}月${day}日`
  } else if (diffDays === 2) {
    return `后天 ${month}月${day}日`
  } else if (diffDays > 0) {
    return `${month}月${day}日`
  } else {
    return `${month}月${day}日`
  }
}


const goBack = () => {
  global.$router.back()
}

const deleteOrder = (id) => {
  api.delete(`/orders/deleteById/${id}`).then(res => {
    ElMessage.success('删除成功')
    getOrderList()
  })
}

// 支付订单
const payOrder = (order) => {
  if (!order || order.status !== 0 || order.countdown <= 0) {
    ElMessage.warning('订单状态异常，无法支付')
    return
  }

  // 设置当前订单信息
  currentOrderInfo.value = {
    orderNo: order.orderNo, 
    totalPrice: order.totalPrice
  }

  // 如果已有二维码，直接显示弹窗
  if (qrCodeText.value) {
    showQrCode.value = true
    return
  }

  // 调用支付接口生成二维码
  api.post('/orders/alipay', {
      orderNo: order.orderNo, 
      totalAmount: order.totalPrice
    }
  ).then(res => {
    if (res.data) {
      currentOrderInfo.value.orderNo = res.data.orderNo
      qrCodeText.value = res.data.qrCode
      showQrCode.value = true
    }
  }).catch(error => {
    console.error('支付请求失败:', error)
    ElMessage.error('支付请求失败，请重试')
  })
}

// 关闭二维码弹窗
const closeQrModal = () => {
  showQrCode.value = false
  qrCodeText.value = ''
  currentOrderInfo.value = {}
}

// 处理二维码加载错误
const handleQrError = () => {
  console.error('二维码加载失败')
  ElMessage.error('二维码加载失败，请重试')
}

// 检查支付状态
const checkPaymentStatus = async () => {
  if (!currentOrderInfo.value.orderNo) {
    ElMessage.warning('订单号不存在')
    return
  }
  
  try {
    const response = await api.get(`/orders/getOrderNo/${currentOrderInfo.value.orderNo}`)
    if (response.data) {
      if (response.data.status === 1) {
        ElMessage.success('支付成功!')
        closeQrModal()
        // 重新加载订单列表
        getOrderList()
      } else {
        ElMessage.warning('您未支付')
      }
    }
  } catch (error) {
    console.error('检查支付状态失败:', error)
    ElMessage.error('检查支付状态失败，请重试')
  }
}

// 计算小吃总价
const getSnackTotalPrice = (order) => {
  if (!order || !order.streetFoods || order.streetFoods.length === 0) {
    return 0
  }
  return order.streetFoods.reduce((total, snack) => {
    return total + (snack.price * snack.num)
  }, 0).toFixed(2)
}

// 计算电影票价格
const getTicketPrice = (order) => {
  if (!order || !order.totalPrice) {
    return 0
  }
  const snackTotal = parseFloat(getSnackTotalPrice(order))
  const ticketPrice = parseFloat(order.totalPrice) - snackTotal
  return ticketPrice.toFixed(2)
}

// 显示订单明细
const showOrderDetail = (order) => {
  currentOrderDetail.value = order
  showOrderDetailModal.value = true
}

// 关闭订单明细弹窗
const closeOrderDetailModal = () => {
  showOrderDetailModal.value = false
  currentOrderDetail.value = {}
}

const goToCinema = (cinemaId,filmId) => {
  global.$router.push({
    path: '/movieScheduling',
    query: {
      cinemaId: cinemaId,
      filmId: filmId
    }
  })
}

// 生命周期
onMounted(() => {
  getOrderList()
})

onUnmounted(() => {
  // 清除所有计时器
  countdownTimers.value.forEach(timer => clearInterval(timer))
  countdownTimers.value.clear()
})
</script>

<style scoped>
.order-view {
  background: #f5f5f5;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background: white;
  border-bottom: 1px solid #eee;
  position: relative;
}

.back-btn {
  position: absolute;
  left: 16px;
  font-size: 24px;
  color: #333;
  cursor: pointer;
  padding: 4px;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.menu-btn, .record-btn {
  position: absolute;
  right: 16px;
  font-size: 20px;
  color: #333;
  cursor: pointer;
  padding: 4px;
}

.record-btn {
  right: 50px;
}

.order-list {
  padding: 8px 0;
}

.order-item {
  background: white;
  margin-bottom: 8px;
  border-radius: 0;
  overflow: hidden;
}

.cinema-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.cinema-name {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.payment-countdown {
  font-size: 14px;
  color: #ff4757;
}

.order-status.completed {
  font-size: 14px;
  color: #666;
}

.order-content {
  display: flex;
  padding: 16px;
  gap: 12px;
}

.movie-poster {
  flex-shrink: 0;
}

.movie-poster img {
  width: 80px;
  height: 110px;
  border-radius: 6px;
  object-fit: cover;
}

.order-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.movie-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 1.3;
}

.movie-time {
  font-size: 14px;
  color: #666;
}

.seat-info {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

/* 小吃信息样式 */
.snacks-info {
  margin-top: 8px;
}

.snacks-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.snacks-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.snack-status {
  font-size: 12px;
  color: #ff4757;
  background: #fff2f2;
  padding: 2px 6px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
}

.detail-btn {
  font-size: 12px;
  color: #ff4757;
  background: transparent;
  border: 1px solid #ff4757;
  padding: 2px 6px;
  border-radius: 10px;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.2s ease;
}

.detail-btn:hover {
  background: #ff4757;
  color: white;
}

.order-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.pay-btn, .review-btn {
  background: #ff4757;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 14px;
  cursor: pointer;
  min-width: 60px;
  transition: all 0.2s ease;
}

.pay-btn:hover, .review-btn:hover {
  background: #ff3742;
}

.expired-btn {
  background: #ccc;
  color: #999;
  border: none;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 14px;
  cursor: not-allowed;
  min-width: 60px;
}

.order-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

.price-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.total-price {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.price-breakdown {
  display: flex;
  gap: 12px;
  font-size: 12px;
}

.ticket-price {
  color: #666;
}

.snack-price {
  color: #ff4757;
}

.delete-btn {
  background: transparent;
  color: #999;
  border: 1px solid #ddd;
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.delete-btn:hover {
  background: #f5f5f5;
  color: #666;
}

.bottom-tip {
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 14px;
}

.order-item.unpaid .cinema-header {
  background: #fff9f9;
}

.order-item.unpaid .payment-countdown {
  font-weight: 600;
}

.order-item.completed .movie-poster::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.order-item.completed .movie-poster {
  position: relative;
}

.order-item.completed .order-info {
  opacity: 0.8;
}

/* 加载更多按钮 */
.load-more {
  text-align: center;
  padding: 20px;
}

.load-more-btn {
  background: #ff4757;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.load-more-btn:hover {
  background: #ff3742;
}

/* 加载状态 */
.loading {
  text-align: center;
  padding: 20px;
  color: #666;
  font-size: 14px;
}

/* 无数据状态 */
.no-data {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  font-size: 14px;
}

/* 倒计时红色高亮 */
.payment-countdown {
  font-size: 14px;
  color: #ff4757;
  font-weight: 600;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* 过期订单样式 */
.order-item.expired .payment-countdown {
  color: #999;
  animation: none;
}

.order-item.expired .order-content {
  opacity: 0.6;
}

@media (max-width: 768px) {
  .order-content {
    padding: 12px 16px;
  }
  
  .movie-poster img {
    width: 70px;
    height: 95px;
  }
  
  .movie-title {
    font-size: 15px;
  }
  
  .movie-time, .seat-info {
    font-size: 13px;
  }
  
  .snacks-title {
    font-size: 13px;
  }
  
  .snack-status {
    font-size: 11px;
    padding: 1px 4px;
  }
  
  .price-breakdown {
    font-size: 11px;
    gap: 8px;
  }
  
  .detail-btn {
    font-size: 11px;
    padding: 1px 4px;
    margin-left: 6px;
  }
  
  .load-more-btn {
    padding: 10px 20px;
    font-size: 13px;
  }
}

/* 订单明细弹窗样式 */
.detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.detail-content {
  background: white;
  border-radius: 12px;
  width: 320px;
  max-width: 90vw;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}

.detail-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.detail-body {
  padding: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.detail-item:last-child {
  border-bottom: none;
}

.item-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.item-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.item-detail span:first-child {
  font-size: 12px;
  color: #666;
}

.item-total {
  font-size: 14px;
  color: #ff4757;
  font-weight: 600;
}

.detail-total {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid #ff4757;
}

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.total-row span:first-child {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.total-amount {
  font-size: 20px;
  font-weight: 600;
  color: #ff4757;
}

/* 二维码弹窗样式 */
.qr-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.qr-content {
  background: white;
  border-radius: 12px;
  width: 320px;
  max-width: 90vw;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.qr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}

.qr-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: #f5f5f5;
  color: #333;
}

.qr-body {
  padding: 20px;
  text-align: center;
}

.qr-code-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 8px;
  min-height: 220px;
}

.qr-code-container img {
  width: 200px;
  height: 200px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.qr-loading {
  color: #666;
  font-size: 14px;
}

.qr-tip {
  color: #666;
  font-size: 14px;
  margin: 16px 0;
  line-height: 1.4;
}

.order-info {
  padding: 12px;
  border-radius: 8px;
}

.order-info p {
  margin: 6px 0;
  font-size: 14px;
  color: #333;
}

.order-info p:first-child {
  color: #666;
  font-size: 12px;
}

.order-info p:last-child {
  color: #ff4757;
  font-weight: 600;
  font-size: 16px;
}

.payment-check-btn {
  width: 100%;
  background: #ff4757;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
  transition: all 0.2s ease;
}

.payment-check-btn:hover {
  background: #ff3742;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
}
</style>
